<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">
    <title>点餐</title>
    <link rel="icon" th:href="@{/assets/img/lcxm.ico}" type="image/ico">
</head>
<body class="body">
<!--导航-->
<div class="container">

    <div class="row">
        <div style="margin-top: 20px;"></div>
        <div class="row">

            <form class="form-horizontal validate" role="form" method="post" th:action="@{/report/save}"
                  onsubmit="return checkForm(this);">

                <!-- 操作信息提示的地方 -->
                <div th:if="${remind}" class="alert alert-${ remind.level  }"
                     th:classappend="'alert-' + ${remind.level}">
                    <button data-dismiss="alert" class="close" type="button">
                        <i class="glyphicon glyphicon-remove"></i>
                    </button>
                    <span th:remove="tag" th:utext="${ remind.message }"></span>
                </div>

                <div class="form-group">
                    <label for="date" class="col-md-2 col-sm-2 control-label">日期*</label>
                    <div class="col-sm-9  col-md-9  ">
                        <input class="datetime form-control input-sm"  id="date" name="date" type="text"
                               th:value="${today}"
                               data-picker-position="bottom-right"
                               data-date-format="yyyy-mm-dd" data-min-view="2"
                               data-end-date-target="now"
                               readonly placeholder="日期"/>
                    </div>
                    
                </div>

                <div class="form-group">
                    <label for="projectId" class="col-md-2 col-sm-2 control-label">项目*</label>
                    <div class="col-sm-9  col-md-9  ">
                        <select class="form-control " id="projectId" name="projectId" data-value="" value=""
                                onChange="fillJiraPrefix(this)"
                                data-rule-required="true" data-url="project/mine">
                            <option value="">--请选择--</option>
                            <option th:each="item:${projects}" th:value="${item.id}" th:text="${item.text + ' (' + item.pid+')'}" th:attr="data-jira-prefix=${item.pid}"></option>
                        </select>
                    </div>
                    
                </div>

                <div class="form-group">
                    <label for="jira" class="col-md-2 col-sm-2 control-label">Jira号*</label>
                    <div class="col-sm-9  col-md-9  ">
                        <input type="text" class="form-control" id="jira" name="jira" value=""
                               onBlur="checkJiraPrefix(this)"
                               onFocus="checkProject(this)"
                               placeholder="注意和项目的jira前缀保持一致" autocomplete="off" />
                    </div>
                    
                </div>


                <div class="form-group">
                    <label for="duration" class="col-md-2 col-sm-2 control-label">工时(分钟)</label>
                    <div class="col-sm-9  col-md-9  ">
                        <input type="number" class="form-control" id="duration" name="duration" value="" data-rule-required="true"
                               placeholder="单位:分" autocomplete="off" />
                    </div>
                    
                </div>

                <div class="form-group">
                    <label for="content" class="col-md-2 col-sm-2 control-label">工作内容</label>
                    <div class="col-sm-9  col-md-9  ">
                        <textarea class="form-control" id="content" name="content"  data-rule-required="true"
                                  placeholder="工作内容, 包括完成度" autocomplete="off" rows="5"></textarea>
                    </div>
                    
                </div>

                <hr/>
            </form>
        </div>
    </div>
</div>

<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<script>

    function fillJiraPrefix(event){
        let prefix = $("#projectId option:selected").data("jiraPrefix");
        if (prefix) {
            $("#jira").val(prefix);
        }
    }

    function checkProject(event) {
        var jira = event.value;
        var projectId = $("#projectId").val();
        if (!projectId) {
            $.alert('请先选择项目');
        }
    }
    function checkJiraPrefix(event) {
        let jira = event.value;
        let prefix = $("#projectId option:selected").data("jiraPrefix");
        if (jira && prefix) {
            if (!jira.startsWith(prefix)) {
                $.alert('jira号须符合项目的jira前缀要求!');
                $("#jira").val("");
            }
        }
    }
</script>

</body>
</html>